<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="main" style="width: 900px;height:700px;"></div>
 <!-- <script src="shine.js"></script> -->
 <script src="echarts.js"></script>
 <script src="http://gallery.echartsjs.com/dep/echarts/map/js/province/beijing.js"></script>
 <script type="text/javascript"> 
  var myChart = echarts.init(document.getElementById('main','shine'));
  option = {
   backgroundColor: '#404a59',
   title: {
    text: '我的微信好友',
    subtext: '北京地区',
    left: 'center',
    textStyle: {
          color: '#fff'
        }
   },

   tooltip: {
    trigger: 'item'
   },
   // legend: {
   //  orient: 'vertical',
   //  left: 'left',
   //  data:['iphone3','iphone4','iphone5']
   // },
   visualMap: {
    min: 0,
    max: 89,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],   // 文本，默认为数值文本
    calculable: true,
    color: ['#d94e5d','#eac736','#50a3ba'],
    textStyle: {
          color: '#fff'
        }
   },
   toolbox: {
    show: false,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
     dataView: {readOnly: false},
     restore: {},
     saveAsImage: {}
    }
   },
   series: [
    {
      itemStyle: {
       normal: {
          color: function (params) {
           var colorList = [
            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
           ];
           return colorList[params.dataIndex]
          },
           
         }
        },
     name: '我的小伙伴',
     type: 'map',
     mapType: '北京',
     roam: false,
     label: {
      normal: {
       show: true
      },
      emphasis: {
       show: true
      }
     },
     data:[
      {name:'密云区' ,value:7},
      {name:'大兴区' ,value:9},
      {name:'房山区' ,value:42},
      {name:'石景山' ,value:4},
      {name:'通州区' ,value:9},
      {name:'昌平区' ,value:1},
      {name:'怀柔区' ,value:2},
      {name:'东城区' ,value:12},
      {name:'丰台区' ,value:19},
      {name:'顺义区' ,value:4},
      {name:'朝阳区' ,value:24},
      {name:'海淀区' ,value:89},
      {name:'平谷区' ,value:3},
      {name:'西城区',value:16},
     {name:'门头沟区',value:3} 

     ]
    }
   ]
  };    
  myChart.setOption(option); 
 </script> 
</body>
</html>